<style type="text/css" media="all">
/*
	
	.questionList{
		padding:10px;
	}
	.questionListImg{
		display: inline-block;
	}
	.questionimg{
		display: inline-block;

	}
	.questionListImginfo{
		width:15px;
		height: 15px;
		padding-right: 5px;
		vertical-align: middle;
		/*background-color: red;*/
	/*}
	.questionListImginfo2{
		width:15px;
		height: 15px;
		padding-right: 1px;
		vertical-align: top;
		/*background-color: red;*/
	/*}*/
	/*.questionContent{
		display: inline-block;
		padding-left:5px;
		vertical-align: middle;
	}
	.questionList .questionListTit{
		padding-bottom: 10px;
		font-weight: 700;
	}
	.questionList .questionListInfo>div{
		float: left;
		padding-right: 15px;
	}
	.questionListUer{
		color:blue;
	}

	.splitor{
		height:2px;
		width:100%;
		background-color: #719fbd;
		margin-top: 15px;
		margin-bottom: 5px;
	}
	
	.questionDetailBody{
		width: 100%;	
		padding-left:1px;
		padding-right:1px;
		word-break: break-all; 
	}
	.splitorRelativies{
		height:1px;
		width:100%;
		background-color: #ccc;
		margin-top: 15px;
		margin-bottom: 5px;
	}
*/
	/* css of comment icon for module question */
	.commentIcon {
		width: 13px;
		height: 12px;
		float: left;
	}

	.questionRelativiesUrl {
		display: block;
		width:50px;
		height:25px;
		margin-top:10px;
		margin-bottom: 10px;
		background-color: #0882f0;
	}

	.signName {
		font-size: auto;
	}
	.footerBtn{
      display: none
	}

	.messageList {
		padding: 10px;
		margin-bottom: -45px;
	}

	.messageContent {
		position: relative;
		line-height: 20px;
		top: -50px;
		left:60px;
		width:200px;
        padding: 10px;
        background: rgba(197, 206, 207, 0.24);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
	}

	.messageContent:after 
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 12px 10px 12px 0;
        border-color: transparent rgba(197, 206, 207, 0.24);
        display: block;
        width: 0;
        z-index: 1;
        left: -10px;
        top: 20px;
    }

	.allCount {
		position: relative;
		right: 0px;
		float: right;
	}

	.messageTime {
		margin-bottom: -5px;
		padding-top:5px;
	}

	.sender {
		color: #0882f0;
	}
/*myselft style*/
	.myListImg{
		position: relative;
		left: 85%;
		bottom: 60px;
	}
	.myListImg img{
		width:50px;
		height:50px;
	}
	.myContent {
		position: relative;
		line-height: 20px;
		left:35px;
		width:200px;
        padding: 10px;
        background: rgba(197, 206, 207, 0.24);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
	}

	.myContent:after 
    {	
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 12px 0px 12px 10px;
        border-color: transparent rgba(197, 206, 207, 0.24);
        display: block;
        width: 0;
        z-index: 1;
        right: -10px;
        top: 20px;
    }

    #commentListMasker{
	      z-index: 11;
	      height: 100%;
	      width: 100%;
	      position: absolute;
	      top: 0;
	      left: 0;
	      background-color: rgba(0,0,0,0.5);
	      display: none;
	   }
	   .optionsContent{
      position: fixed !important;
      z-index: 1100;
      display: none;
      background-color: white;
	  border: 5px solid #111 !important;
      /*height: 300px;*/
      width:220px;
       -webkit-box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   -moz-box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   }
   .optionTitle {
   	/*font: 14px/1.25 "Helvetica Neue", sans-serif;*/
   	font-size: 23px;
	padding: 10px;
	position: relative !important;
	background: #1C66AE;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 0px #1C66AE;
	zoom: 1;

   }
   .option {
   	font-size: 20px;
   	padding:10px;
   }
   .option:active {
   	font-size: 20px;
   	padding:10px;
   	background-color:#FFCC00;
   }
   #transpond {
   	border-bottom: 1px solid #ccc;
   }
</style>
<script type="text/javascript">
	var myInfo = Piece.Store.loadObject("user_message");
	var myName = myInfo.name
</script>

<script id="myCommentDetailTemplate" type="text/x-underscore-template">
	<div class="messageList" > 

<%if(myName === commentAuthor){ %>


				<div class="myContent" style="display: inline-block;" data-id=<%=id%> data-name=<%=commentAuthor%>>
					<div>
						<span>
							<span class="sender" data-name=<%=commentAuthor%>> <%=commentAuthor%></span>:
							<span id="span<%=id%>"><%=content%></span>
						</span>
					</div>
					<div class="h6">
						<div class="messageTime">
							<%=moment(pubDate, "YYYY-MM-DD HH:mm:ss").fromNow()%>
						</div>
					</div>
				</div>

				<div class="myListImg" data-authorid=<%=commentAuthorId%> data-author=<%=commentAuthor%> data-id=<%=id%>>

				<%
				var commentPortrait;
			if(commentPortrait==="/img/portrait.gif"){
				commentPortrait = "../base/img/widget_dface.ing"
			}
				%>


					<img src="<%=commentPortrait%>" alt="" onerror="javascript:this.src='../base/img/widget_dface.ing';"></div>

<%	}else{   %>

				<div class="tweetListImg" data-authorid=<%=commentAuthorId%> data-author=<%=commentAuthor%> data-id=<%=id%>>

				<%
				var commentPortrait;
			if(commentPortrait==="/img/portrait.gif"){
				commentPortrait = "../base/img/widget_dface.ing"
			}
				%>


					<img src="<%=commentPortrait%>" alt="" onerror="javascript:this.src='../base/img/widget_dface.ing';"></div>
				<div class="messageContent" data-id=<%=id%> data-name=<%=commentAuthor%>>
					<div>
						<span>
							<span class="sender" data-name=<%=commentAuthor%>> <%=commentAuthor%></span>:
							<span id="span<%=id%>"><%=content%></span>
						</span>
					</div>
					<div class="h6">
						<div class="messageTime">
							<%=moment(pubDate, "YYYY-MM-DD HH:mm:ss").fromNow()%>
						</div>
					</div>
				</div>

<%	}  %>

	

</div>
</script>

<!-- header -->
<header class="bar-title">
	<div class="left-banner">
		 <span class="homeBtn icon-reply imgsize"></span>
	</div>
	<h1 class="title">我和<span class="senderTit"></span>的对话</h1>
	<div class="right-banner">
		<!-- <span class="refreshBtn icon-repeat imgsize"></span> -->
	</div>

</header>

<!-- uncomment this if you want a sencondary-bars

<nav class="bar-standard bar-header-secondary"></nav>
-->
<!-- content -->
<div class="content">
	<list id="my-comment-detail" 
    autoLoad="false"
    isPullDownRefresh="true"  
    jsonRoot="commentList"
    bundle="fs"
    paging="true"
    iScroll="true"
    _itemTemplate="myCommentDetailTemplate"></list>
</div>

<!-- 回复遮罩层 -->
<div id="commentListMasker"></div>
<!-- 长按留言弹出的选择div -->
<div class="optionsContent ui-corner-all">
	<div class="optionTitle">选择</div>
	<div class="option" id="transpond">转发</div>
	<div class="option" id="del">删除</div>
	
</div>
<!-- 长按留言弹出的选择div -->


<footer class="bar-tab" id="bar-tab2">
<ul class="tab-inner">
   <li class="tab-item ">
      <input type="text" class="footcomment" id="commentCont" placeholder="发送留言">
  </li>
  <li><button class="footerBtn" id="commentTweet">发送</button></li>
</ul>
</footer>
